<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>葫芦文化节 - 报名</title>

    <!-- 引入 Vant UI 库 CDN -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />

    <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>

    <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script> -->

    <!-- 引入 Vant CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />

    <!-- 引入 Vue2 -->
    <script src="./js/vue.min.js"></script>

    <!-- 引入 Vant2 -->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #fcf1d5;
        height: 100vh;
        overflow: hidden;
      }

      /* 应用容器 */
      .app {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: #fcf1d5;
      }

      /* 主内容区域 */
      .main-content {
        flex: 1;
        overflow-y: auto;
      }

      /* 注册表单样式 */
      .registration-form {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: #fcf1d5;
        overflow: hidden;
      }

      /* 活动信息卡片 */
      .event-info {
        flex: 0;
        padding: 1rem 1.2rem 0.5rem;
        background-color: #fcf1d5;
      }

      .event-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #005918;
        font-size: 1.2rem;
        margin-bottom: 0.7rem;
      }

      .title-icon {
        width: 1.2rem;
      }

      .event-rules {
        padding-left: 1.8rem;
      }

      .rule-item {
        font-size: 0.8rem;
        color: #7d7b7b;
        line-height: 1.5;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
      }

      .rule-item:last-child {
        margin-bottom: 0;
      }

      .rule-item::before {
        content: '';
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid #005918;
        border-radius: 50%;
        margin-right: 0.5rem;
        flex-shrink: 0;
      }

      /* 表单容器 */
      .form-container {
        flex: 1;
        margin: 0;
        overflow: auto;
      }

      .submit-btn {
        width: 70%;
        height: 2.5rem;
        line-height: 2.5rem;
        background-color: #005918;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        border-radius: 0.5rem;
        margin: 1rem auto;
        cursor: pointer;
        border: none;
      }

      .submit-btn:active {
        opacity: 0.8;
      }

      /* 自定义 Vant 样式 */
      .van-form {
        margin: 0 0.8rem;
        margin-bottom: 1rem;
        background: #ffffff;
        border-radius: 0.5rem;
        overflow: hidden;
      }

      .upload-field .van-field__control {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.3rem;
      }

      .upload-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 4rem;
        border-radius: 0.2rem;
        border: 1px solid #86c2fe;
      }

      .upload-button-inner {
        width: 4rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .corner {
        position: absolute;
        width: 1rem;
        height: 1rem;
      }

      .corner-top-left {
        border-top: 1px solid #86c2fe;
        border-left: 1px solid #86c2fe;
        top: 0;
        left: 0;
      }

      .corner-top-right {
        border-top: 1px solid #86c2fe;
        border-right: 1px solid #86c2fe;
        top: 0;
        right: 0;
      }

      .corner-bottom-left {
        border-bottom: 1px solid #86c2fe;
        border-left: 1px solid #86c2fe;
        bottom: 0;
        left: 0;
      }

      .corner-bottom-right {
        border-bottom: 1px solid #86c2fe;
        border-right: 1px solid #86c2fe;
        bottom: 0;
        right: 0;
      }

      .upload-icon {
        width: 2rem;
        height: 2rem;
      }

      .upload-tip {
        font-size: 0.8rem;
        color: #c8c9cc;
        line-height: 1.4;
        margin-top: 0.5rem;
      }

      /* 底部导航栏 */
      .bottom-navbar {
        flex: 0;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #333333;
        padding: 0.6rem 0 0.5rem 0;
        width: 50%;
        cursor: pointer;
        user-select: none;
      }

      .nav-item.active {
        color: #333333;
      }

      .nav-icon-wrapper {
        position: relative;
        margin-bottom: 0.2rem;
      }

      .nav-icon {
        width: 1.5rem;
        height: 1.8rem;
      }

      .nav-label {
        font-size: 0.7rem;
        font-weight: 500;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="app">
        <main class="main-content">
          <!-- 注册表单页面 -->
          <div class="registration-form">
            <!-- 活动信息卡片 -->
            <div class="event-info">
              <div class="event-title">
                <img src="./images/arrow-left.png" class="title-icon" />
                百葫雅韵 · 葫芦工艺大赛
              </div>
              <div class="event-rules">
                <div class="rule-item">
                  以手机号为标识，每户仅限报名一次;不可重复报名
                </div>
                <div class="rule-item">
                  报名成功后，系统会为每个业户分配一个编号
                </div>
                <div class="rule-item">现场根据编号安排展位</div>
              </div>
            </div>

            <!-- 表单区域 -->
            <div class="form-container">
              <van-form>
                <van-cell-group>
                  <van-field
                    v-model="formData.name"
                    name="name"
                    label="姓名"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                    required
                  />
                </van-cell-group>

                <van-cell-group>
                  <van-field
                    v-model="formData.company"
                    name="company"
                    label="公司名称"
                    placeholder="请输入"
                  />
                </van-cell-group>

                <!-- 身份证号 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.idCard"
                    name="idCard"
                    label="身份证号"
                    placeholder="请输入"
                  />
                </van-cell-group>

                <!-- 手机号 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.phone"
                    name="phone"
                    label="手机号"
                    placeholder="请输入"
                    type="tel"
                    :rules="[
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
                  ]"
                    required
                  />
                </van-cell-group>

                <!-- 是否非遗传承人 -->
                <van-cell-group>
                  <van-field name="isHeritage" label="是否非遗传承人" required>
                    <template #input>
                      <van-radio-group
                        v-model="formData.isHeritage"
                        direction="horizontal"
                      >
                        <van-radio name="yes">是</van-radio>
                        <van-radio name="no">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </van-cell-group>

                <!-- 省份 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.province"
                    name="province"
                    label="省"
                    placeholder="请输入"
                    readonly
                    is-link
                    :rules="[{ required: true, message: '请选择省份' }]"
                    required
                    @click="showProvincePicker = true"
                  />
                </van-cell-group>

                <!-- 城市 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.city"
                    name="city"
                    label="市"
                    placeholder="请输入"
                    readonly
                    is-link
                    :rules="[{ required: true, message: '请选择城市' }]"
                    required
                    @click="showCityPicker = true"
                  />
                </van-cell-group>

                <!-- 地址 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.address"
                    name="address"
                    label="地址"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请填写地址' }]"
                    required
                  />
                </van-cell-group>

                <!-- 作品名称 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.workName"
                    name="workName"
                    label="作品名称"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请填写作品名称' }]"
                    required
                  />
                </van-cell-group>

                <!-- 作品图片 -->
                <van-cell-group>
                  <van-field
                    class="upload-field"
                    name="workImages"
                    label="作品图片"
                    required
                  >
                    <template #input>
                      <van-uploader
                        v-model="fileList"
                        multiple
                        :max-count="6"
                        :after-read="afterRead"
                        upload-text="上传图片"
                      >
                        <div class="upload-button">
                          <div class="upload-button-inner">
                            <div class="corner corner-top-left"></div>
                            <div class="corner corner-top-right"></div>
                            <div class="corner corner-bottom-left"></div>
                            <div class="corner corner-bottom-right"></div>
                            <img
                              src="./images/upload-photo.png"
                              class="upload-icon"
                            />
                          </div>
                        </div>
                      </van-uploader>
                      <div class="upload-tip">
                        请提供三张以上作品照片,包括作品包装、作品全景及侧面等多角度照片,照片背景为纯色。
                      </div>
                    </template>
                  </van-field>
                </van-cell-group>

                <!-- 作品简介 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.workIntro"
                    name="workIntro"
                    label="作品简介"
                    type="textarea"
                    placeholder="系列作品分别注明尺寸、材质及创意等。"
                    :rules="[{ required: true, message: '请填写作品简介' }]"
                    required
                    autosize
                  />
                </van-cell-group>

                <!-- 作品规格 -->
                <van-cell-group>
                  <van-field
                    v-model="formData.workSpecs"
                    name="workSpecs"
                    label="作品规格、重量、材质、工艺"
                    type="textarea"
                    placeholder="规格：长、宽、高；单位：cm； 重量单位：kg"
                    autosize
                  />
                </van-cell-group>

                <div class="submit-btn" @click="handleSubmit">提交</div>
              </van-form>
            </div>
          </div>
        </main>

        <!-- 底部导航栏 -->
        <nav class="bottom-navbar">
          <div
            v-for="item in navItems"
            :key="item.id"
            class="nav-item"
            :class="{ active: isActive(item) }"
            @click="handleNavClick(item)"
          >
            <div class="nav-icon-wrapper">
              <img
                class="nav-icon"
                :src="isActive(item) ? item.activeIcon : item.icon"
              />
            </div>
            <span class="nav-label">{{ item.name }}</span>
          </div>
        </nav>
      </div>
      <!-- 省份选择器 -->
      <van-popup v-model="showProvincePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="provinceColumns"
          @confirm="onProvinceConfirm"
          @cancel="showProvincePicker = false"
        />
      </van-popup>

      <!-- 城市选择器 -->
      <van-popup v-model="showCityPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="cityColumns"
          @confirm="onCityConfirm"
          @cancel="showCityPicker = false"
        />
      </van-popup>
    </div>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            // 当前页面
            currentPage: 'register',

            // 表单数据
            formData: {
              name: '',
              company: '',
              idCard: '',
              phone: '',
              isHeritage: 'no',
              province: '',
              city: '',
              address: '',
              workName: '',
              workIntro: '',
              workSpecs: ''
            },

            // 文件上传相关
            fileList: [],
            isSubmitting: false,

            // 省市区选择器
            showProvincePicker: false,
            showCityPicker: false,

            // 省份数据
            provinceColumns: [
              {
                text: '北京市',
                value: 'beijing'
              },
              {
                text: '上海市',
                value: 'shanghai'
              },
              {
                text: '广东省',
                value: 'guangdong'
              },
              {
                text: '江苏省',
                value: 'jiangsu'
              },
              {
                text: '浙江省',
                value: 'zhejiang'
              },
              {
                text: '山东省',
                value: 'shandong'
              },
              {
                text: '河南省',
                value: 'henan'
              },
              {
                text: '四川省',
                value: 'sichuan'
              },
              {
                text: '湖北省',
                value: 'hubei'
              },
              {
                text: '湖南省',
                value: 'hunan'
              },
              {
                text: '河北省',
                value: 'hebei'
              },
              {
                text: '福建省',
                value: 'fujian'
              },
              {
                text: '安徽省',
                value: 'anhui'
              },
              {
                text: '辽宁省',
                value: 'liaoning'
              },
              {
                text: '江西省',
                value: 'jiangxi'
              },
              {
                text: '陕西省',
                value: 'shaanxi'
              },
              {
                text: '山西省',
                value: 'shanxi'
              },
              {
                text: '黑龙江省',
                value: 'heilongjiang'
              },
              {
                text: '吉林省',
                value: 'jilin'
              },
              {
                text: '甘肃省',
                value: 'gansu'
              },
              {
                text: '青海省',
                value: 'qinghai'
              },
              {
                text: '云南省',
                value: 'yunnan'
              },
              {
                text: '贵州省',
                value: 'guizhou'
              },
              {
                text: '海南省',
                value: 'hainan'
              },
              {
                text: '台湾省',
                value: 'taiwan'
              },
              {
                text: '内蒙古自治区',
                value: 'neimenggu'
              },
              {
                text: '新疆维吾尔自治区',
                value: 'xinjiang'
              },
              {
                text: '西藏自治区',
                value: 'xizang'
              },
              {
                text: '宁夏回族自治区',
                value: 'ningxia'
              },
              {
                text: '广西壮族自治区',
                value: 'guangxi'
              },
              {
                text: '香港特别行政区',
                value: 'hongkong'
              },
              {
                text: '澳门特别行政区',
                value: 'macao'
              }
            ],

            // 城市数据
            cityColumns: [
              {
                text: '北京市',
                value: 'beijing'
              },
              {
                text: '上海市',
                value: 'shanghai'
              },
              {
                text: '广州市',
                value: 'guangzhou'
              },
              {
                text: '深圳市',
                value: 'shenzhen'
              },
              {
                text: '杭州市',
                value: 'hangzhou'
              },
              {
                text: '南京市',
                value: 'nanjing'
              },
              {
                text: '苏州市',
                value: 'suzhou'
              },
              {
                text: '成都市',
                value: 'chengdu'
              },
              {
                text: '武汉市',
                value: 'wuhan'
              },
              {
                text: '西安市',
                value: 'xian'
              }
            ],

            // 导航菜单配置数组
            navItems: [
              {
                id: 'home',
                name: '文化节',
                path: '/',
                icon: './images/tab-home.png',
                activeIcon: './images/tab-home-active.png'
              },
              {
                id: 'news',
                name: '报道',
                path: '/news',
                icon: './images/tab-news.png',
                activeIcon: './images/tab-news-active.png'
              },
              {
                id: 'register',
                name: '报名',
                path: '/register',
                icon: './images/tab-register.png',
                activeIcon: './images/tab-register-active.png'
              },
              {
                id: 'profile',
                name: '我的',
                path: '/profile',
                icon: './images/tab-me.png',
                activeIcon: './images/tab-me-active.png'
              }
            ]
          }
        },
        computed: {
          // 计算当前激活的导航项
          activeNavId() {
            const foundItem = this.navItems.find(
              item => item.path === this.getCurrentPath()
            )
            return foundItem ? foundItem.id : 'register'
          }
        },
        methods: {
          // 获取当前路径
          getCurrentPath() {
            return this.currentPage === 'home' ? '/' : `/${this.currentPage}`
          },

          // 导航点击处理函数
          handleNavClick(item) {
            if (item.id === 'home') {
              window.location.href = './index.html'
            } else if (item.id === 'register') {
              // 当前页面，不需要跳转
            } else {
              // 其他页面可以在这里添加跳转逻辑
              console.log('跳转到:', item.name)
            }
          },

          // 判断导航项是否激活
          isActive(item) {
            return this.activeNavId === item.id
          },

          // 省份选择确认
          onProvinceConfirm(data) {
            this.formData.province = data.text
            this.showProvincePicker = false
            // 清空城市选择
            this.formData.city = ''
          },

          // 城市选择确认
          onCityConfirm(data) {
            this.formData.city = data.text
            this.showCityPicker = false
          },

          // 文件上传后处理
          afterRead(file) {
            console.log('文件上传:', file)
            // 这里可以添加文件上传到服务器的逻辑
          },

          // 表单提交
          handleSubmit() {
            console.log('表单数据：', this.formData)
            console.log('作品图片：', this.fileList)
          }
        }
      })
    </script>
  </body>
</html>
